<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item">
          <span>账户类型</span>
          <div class="right">
            <span v-for="(item, index) in typelist" :key="index" :class="params_list.type == item ? 'active' : ''" @click="selected(item)">{{item}}</span>
          </div>
        </div>
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>商户/机构名称</span>
              <el-input class="tel-value" v-model="params_list.username" placeholder="请输入商户名称"></el-input>
            </div>
            <div class="item-inline">
              <span>当前状态</span>
              <el-select class="tel-value" v-model="params_list.status" placeholder="请选择">
                <el-option v-for="(item,index) in statuslist" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          结算列表
          <!-- <el-button class="jx-btn" type="primary" @click="exportRow">全选</el-button> -->
          <div class="add-new">
            <el-button class="jx-btn" type="primary" :loading="boo.isAdd" @click="addRow">{{boo.isAdd ? '请稍后……' : '生成结算单'}}</el-button>
            <el-button class="jx-btn" type="primary" :loading="boo.isExport" @click="exportRow">{{boo.isExport ? '请稍后……' : '导出'}}</el-button>
          </div>
        </div>
        <el-table :data="list" border tooltip-effect="dark" ref="multipleTable" @selection-change="handleSelectionChange" style="width: 100%" v-loading="boo.loading">
          <el-table-column class="app-select" type="selection" label="全选" width="40" align="right">
          </el-table-column>
          <el-table-column class="app-index" type="index" label="全选" width="50" align="left">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="balanceNo" label="订单编号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="balanceCatalog" label="账户类型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="balanceUnitName" label="结算方" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="balanceAt" label="订单时间" align="center" width="150" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="balanceStatus" label="当前状态" align="center">
          </el-table-column>
          <el-table-column prop="balanceSum" label="订单金额" align="center">
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
           <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          list: this.$api.finance.settlement,
          common: this.$api.common.dict
        },
        boo: {
          loading: false,
          isExport: false,
          isAdd: false,
        },
        other: {
          allRow: 1,
        },
        list: '',
        typelist: '',
        statuslist: '',
        params_list: {
          page: 1,
          size: 10,
          username: '',
          status: '',
          type: '全部',
        },
        multipleSelection: []
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getDict('balanceCatalog')
      _self.getDict('balanceStatus')
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['balanceCatalog',()=>{
              _self.typelist = list
              _self.typelist.unshift('全部')
            }],
            ['balanceStatus',()=>{
              _self.statuslist = list
            }]
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common, params, success) 
      },
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          orderBy: '',
          balanceCatalog: _self.params_list.type,
          balanceStatus: _self.params_list.status,
          balanceAccountName: _self.params_list.username,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.list = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      selected(item){
        let _self = this
        _self.params_list.type = item
        _self.getList()
      },
      handleSelectionChange(val) {
        let _self = this
        let id = []
        JSON.parse(JSON.stringify(val)).forEach(function(item){
          return id.push(item.balanceId)
        });
        _self.multipleSelection = id
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        _self.getList()
      },
      //生成结算单
      addRow(){
        let _self = this
        _self.boo.isAdd = true
        let params = {
          balanceIds: _self.multipleSelection,
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            window.open(res.request.responseURL)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.isAdd = false
        }
        _self.$axios.post(_self.https.list.add, params, success)
      },
      exportRow(){

      }
    }
	}

</script>
<style scoped lang="scss">
  .select-type .table-item .right span {
    width: 95px
  }
  .jx-table /deep/ .el-table th.is-leaf:first-child {
    border-right: 0
  } 
  .jx-table /deep/ .el-table th.is-leaf:first-child .cell {
    padding-right: 0
  }
  /deep/ .el-table td.is-right:first-child, .el-table th.is-right:first-child {
    border-right: 0
  }
  /deep/ .el-table td.is-right:first-child, .el-table th.is-right:first-child .cell {
    padding-right: 0
  }
</style>
